<template>
<div id="app">
  
  <!-- transition为动画组件 -->
  <transition name="tt" mode="out-in">
    <!-- keep-alive为缓存组件 -->
    <keep-alive :max="10"  include="" exclude="">
      <!-- 动态切换组件 -->
      <component :is="list[coust]"></component>
    </keep-alive>
  </transition>
  
  
  
    <div class="foot">
      <div v-for="(item,index) in foots" :key="index" @click="biang(index)" :class="(coust==index?'liang':'')">{{item}}</div>
    </div>
  </div>
</template>

<script>
import wode from './components/wode.vue';
import baobaotuan from './components/baobaotuan.vue';
import dindan from './components/dindang.vue';
import {shop_list,tuan_list,user_login} from './utils/api'
import shouye from './components/shouye.vue';
// import shouye from './components/shouye.vue';
export default {
  components: { shouye,wode,dindan,baobaotuan },
  data(){
    return {
      coust:0,
     
      foots:["首页",'爆爆团',"订单","我的"],
      list:[shouye,baobaotuan,dindan,wode]
    }
  },
  component:{
    shouye,
  },
  methods:{
    biang(index){
      this.coust=index;
    }
  },
  mounted() {
    //在组件中 只需要调用封装好的函数 就可以发起ajax请求
    // 请求 店铺列表
    shop_list().then((res)=>{
      console.log(res.data);
    })
  },
}
</script>

<style  >
*{
  margin: 0;padding: 0;
}

.foot{
  width: 100%;
  display: flex;
  justify-content: space-around;
  position: fixed;
  bottom: 0;
  border-top:1px solid gray ;
  background-color: aliceblue;
}
.foot>div{
  padding: 10px 0;

}
.liang{
  color: lightskyblue;
}
/* 入场动画 */
.tt-enter{
  transform: scale(0) rotate(0deg);
}
.tt-enter-active{
  transition: all 0.2s;
}
.tt-enter-to{
  transform: scale(1) rotate(360deg);
}
/* 出厂动画 */
.tt-leave{
  transform: scale(1) rotate(360deg);
}
.tt-leave-active{
  transition: all 0.2s;
}
.tt-leave-to{
  transform: scale(0) rotate(0deg);
}
</style>
